<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>教育板块 - 花城+教育平台</title>
    <style>
      :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
        --accent-color: #e74c3c;
        --light-color: #f9f9f9;
        --dark-color: #34495e;
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
      }

      body {
        background-color: #f5f7fa;
        color: #333;
        line-height: 1.6;
        padding-bottom: 60px;
      }

      .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 15px;
      }

      header {
        background: white;
        color: #333;
        padding: 10px 0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: var(--shadow);
      }

      .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
      }

      .logo i {
        margin-right: 8px;
        font-size: 20px;
      }

      .search-box {
        background: #f5f5f5;
        border-radius: 20px;
        padding: 8px 15px;
        margin: 0 15px;
        display: flex;
        align-items: center;
        flex: 1;
      }

      .search-box input {
        border: none;
        outline: none;
        width: 100%;
        padding: 0 10px;
        font-size: 0.9rem;
        background: transparent;
      }

      .banner {
        position: relative;
        height: 160px;
        overflow: hidden;
        margin-bottom: 20px;
        border-radius: 0 0 15px 15px;
      }

      .banner-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.5s ease;
      }

      .banner-slide.active {
        opacity: 1;
      }

      .banner-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;
        padding: 20px;
        text-align: center;
      }

      .banner h1 {
        font-size: 1.3rem;
        margin-bottom: 8px;
      }

      .banner p {
        font-size: 0.8rem;
        margin-bottom: 15px;
      }

      .banner-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      .btn {
        padding: 8px 16px;
        border-radius: 20px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 12px;
      }

      .btn-primary {
        background-color: var(--primary-color);
        color: white;
      }

      .btn-secondary {
        background-color: white;
        color: var(--primary-color);
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 25px 0 15px;
      }

      .section-title {
        color: var(--dark-color);
        position: relative;
        padding-left: 15px;
        font-size: 1.2rem;
      }

      .section-title:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: var(--secondary-color);
        border-radius: 2px;
      }

      .more-link {
        color: var(--primary-color);
        font-size: 0.9rem;
        text-decoration: none;
      }

      .features {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        margin-bottom: 25px;
        padding-bottom: 10px;
        scrollbar-width: none;
      }

      .features::-webkit-scrollbar {
        display: none;
      }

      .feature-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s;
        min-width: 250px;
        flex-shrink: 0;
        cursor: pointer;
      }

      .feature-icon {
        height: 100px;
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 40px;
      }

      .feature-content {
        padding: 15px;
      }

      .feature-content h3 {
        margin-bottom: 8px;
        color: var(--dark-color);
        font-size: 1rem;
      }

      .feature-content p {
        font-size: 0.8rem;
        color: #666;
      }

      .categories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 25px;
      }

      .category {
        background: white;
        border-radius: 12px;
        padding: 20px 15px;
        box-shadow: var(--shadow);
        text-align: center;
        transition: all 0.3s;
      }

      .category-icon {
        font-size: 30px;
        margin-bottom: 10px;
        color: var(--primary-color);
      }

      .category h3 {
        margin-bottom: 8px;
        color: var(--dark-color);
        font-size: 0.9rem;
      }

      .category p {
        color: #666;
        font-size: 0.75rem;
      }

      /* 思政 - 纵向列表 */
      .ideology-news {
        margin-bottom: 25px;
      }
      
      .ideology-news-item {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 15px;
        display: flex;
        gap: 15px;
      }
      
      .ideology-news-item-image {
        width: 80px;
        height: 60px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
        position: relative;
        background-size: cover;
        background-position: center;
      }
      
      .ideology-badge {
        position: absolute;
        top: -5px;
        left: -5px;
        background: #ff6b6b;
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        z-index: 1;
      }
      
      .ideology-news-item-content h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }
      
      .ideology-news-item-content p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
      }
      
      .ideology-news-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }
      
      .ideology-viewers {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      /* 近期直播 - 纵向列表 */
      .live-news {
        margin-bottom: 25px;
      }
      
      .live-news-item {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 15px;
        display: flex;
        gap: 15px;
      }
      
      .live-news-item-image {
        width: 80px;
        height: 60px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
        position: relative;
        background-size: cover;
        background-position: center;
      }
      
      .live-badge {
        position: absolute;
        top: -5px;
        left: -5px;
        background: var(--accent-color);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        z-index: 1;
      }
      
      .live-news-item-content h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }
      
      .live-news-item-content p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
      }
      
      .live-news-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }
      
      .live-viewers {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      /* 近期活动 - 改为与近期直播相同的纵向列表 */
      .events-news {
        margin-bottom: 25px;
      }
      
      .events-news-item {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 15px;
        display: flex;
        gap: 15px;
      }
      
      .events-news-item-image {
        width: 80px;
        height: 60px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
        position: relative;
        background-size: cover;
        background-position: center;
      }
      
      .events-badge {
        position: absolute;
        top: -5px;
        left: -5px;
        background: var(--secondary-color);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        z-index: 1;
      }
      
      .events-news-item-content h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }
      
      .events-news-item-content p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
      }
      
      .events-news-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }

      .news {
        margin-bottom: 25px;
      }

      .news-item {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 15px;
        display: flex;
        gap: 15px;
      }

      .news-item-image {
        width: 80px;
        height: 60px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
      }

      .news-item-content h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }

      .news-item-content p {
        font-size: 0.8rem;
        color: #666;
      }

      .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
      }

      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #666;
        font-size: 0.7rem;
        flex: 1;
      }

      .nav-item.active {
        color: var(--primary-color);
      }

      .nav-icon {
        font-size: 20px;
        margin-bottom: 4px;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }

      .course-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .course-card {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        display: flex;
        gap: 15px;
      }

      .course-image {
        width: 80px;
        height: 60px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
      }

      .course-info h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }

      .course-info p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
      }

      .course-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }

      .interaction-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .interaction-card {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
      }

      .interaction-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .interaction-title {
        font-weight: bold;
        font-size: 0.9rem;
      }

      .interaction-date {
        font-size: 0.75rem;
        color: #777;
      }

      .interaction-content {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 10px;
      }

      .interaction-stats {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }

      .activity-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .activity-card {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: var(--shadow);
        display: flex;
        gap: 15px;
      }

      .activity-image {
        width: 80px;
        height: 80px;
        background-color: #ddd;
        border-radius: 8px;
        flex-shrink: 0;
      }

      .activity-info h4 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }

      .activity-info p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
      }

      .activity-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #777;
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px 15px;
        background: white;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
      }

      .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      }

      .user-details h3 {
        margin-bottom: 5px;
        font-size: 1rem;
      }

      .user-details p {
        font-size: 0.8rem;
        color: #666;
      }

      .user-stats {
        display: flex;
        justify-content: space-around;
        background: white;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
      }

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .stat-value {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--primary-color);
      }

      .stat-label {
        font-size: 0.7rem;
        color: #666;
        margin-top: 5px;
      }

      .user-menu {
        background: white;
        border-radius: 12px;
        padding: 15px 0;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
      }

      .menu-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        text-decoration: none;
        color: #333;
        font-size: 0.9rem;
      }

      .menu-item i {
        margin-right: 10px;
        font-size: 18px;
        width: 24px;
        text-align: center;
      }

      .menu-item:active {
        background: #f5f5f5;
      }

      .quick-nav {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 15px 0;
        margin-bottom: 0;
        scrollbar-width: none;
      }

      .quick-nav::-webkit-scrollbar {
        display: none;
      }

      .nav-button {
        background: white;
        border-radius: 20px;
        padding: 8px 15px;
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.8rem;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .nav-button.active {
        background: var(--primary-color);
        color: white;
      }

      .back-button {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        color: var(--primary-color);
        text-decoration: none;
        margin-bottom: 15px;
      }

      .subpage-title {
        margin: 15px 0;
        color: var(--dark-color);
        font-size: 1.3rem;
        text-align: center;
      }

      .function-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 25px;
      }

      .function-item {
        background: white;
        border-radius: 12px;
        padding: 20px 15px;
        box-shadow: var(--shadow);
        text-align: center;
        transition: all 0.3s;
      }

      .function-icon {
        font-size: 30px;
        margin-bottom: 10px;
        color: var(--primary-color);
      }

      .function-item h3 {
        margin-bottom: 8px;
        color: var(--dark-color);
        font-size: 0.9rem;
      }

      .function-item p {
        color: #666;
        font-size: 0.75rem;
      }

      .live-list {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        margin-bottom: 25px;
        padding-bottom: 10px;
        scrollbar-width: none;
      }

      .live-list::-webkit-scrollbar {
        display: none;
      }

      .live-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        min-width: 280px;
        flex-shrink: 0;
        position: relative;
      }

      .live-badge-old {
        position: absolute;
        top: 10px;
        left: 10px;
        background: var(--accent-color);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        z-index: 1;
      }

      .live-image {
        height: 140px;
        background-color: #ddd;
        background-size: cover;
        background-position: center;
        position: relative;
      }

      .live-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
      }

      .live-content {
        padding: 15px;
      }

      .live-content h3 {
        margin-bottom: 8px;
        font-size: 0.95rem;
      }

      .live-content p {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 10px;
      }

      .live-meta {
        display: flex;
        justify-content: space-between;
        color: #777;
        font-size: 0.75rem;
      }

      .live-viewers-old {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      
      /* 活动中心页面样式 */
      .activity-center-tabs {
        display: flex;
        margin-bottom: 20px;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }
      
      .activity-tab {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-size: 0.9rem;
        color: #666;
        border-bottom: 2px solid transparent;
        cursor: pointer;
      }
      
      .activity-tab.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <i>📚</i>
            <span>花城+教育</span>
          </div>
          <div class="search-box">
            <span>🔍</span>
            <input type="text" placeholder="搜索课程、活动或资讯" />
          </div>
        </div>
      </div>
    </header>

    <div class="tab-content active" id="education">
      <div class="container">
        <div class="quick-nav">
          <a href="#" class="nav-button active">推荐</a>
          <a href="#" class="nav-button">直播</a>
          <a href="#" class="nav-button">有声</a>
          <a href="#" class="nav-button">粤语</a>
          <a href="#" class="nav-button">教育</a>
          <a href="#" class="nav-button">健康</a>
          <a href="#" class="nav-button">短剧</a>
        </div>
      </div>

      <!-- Banner轮播 -->
      <div class="banner">
        <div
          class="banner-slide active"
          style="
            background-image: url('https://gzjyc.gzdjg.edu.cn/cmsFile/20250310/1741618325702.png');
          "
        >
          <div class="banner-content">
            <!-- <h1>集权威内容、深度互动与多元实践</h1>
            <p>连接家校社三方，打造高活跃度教育社区</p>
            <div class="banner-buttons">
              <button class="btn btn-primary">立即体验</button>
              <button class="btn btn-secondary">了解详情</button>
            </div> -->
          </div>
        </div>
        <div
          class="banner-slide"
          style="
            background-image: url('https://gzjyc.gzdjg.edu.cn/cmsFile/20250310/1741618481620.png');
          "
        >
          <div class="banner-content">
            <!-- <h1>满足用户"学、问、行"全面需求</h1>
            <p>打造全方位教育服务平台</p>
            <div class="banner-buttons">
              <button class="btn btn-primary">立即体验</button>
              <button class="btn btn-secondary">了解详情</button>
            </div> -->
          </div>
        </div>
      </div>

      <div class="container">
        <!-- <div class="section-header">
          <h2 class="section-title">导航</h2>
        </div>
        <div class="features">
          <div class="feature-card" data-target="live-center">
            <div class="feature-icon">📹</div>
            <div class="feature-content">
              <h3>教育直播中心</h3>
              <p>校园活动、名师课程实时直播</p>
            </div>
          </div>
          <div class="feature-card" data-target="activity-center">
            <div class="feature-icon">🎯</div>
            <div class="feature-content">
              <h3>活动中心</h3>
              <p>互动成长营与知行探索营</p>
            </div>
          </div>
        </div> -->

        <!-- 思政 - 新增板块 -->
        <div class="section-header">
          <h2 class="section-title">思政</h2>
          <a href="#" class="more-link" data-target="ideology-more">更多</a>
        </div>
        <div class="ideology-news">
          <div class="ideology-news-item">
            <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
              <div class="ideology-badge">思政专题</div>
            </div>
            <div class="ideology-news-item-content">
              <h4>《一门"新"思》新时代 我来讲--筑梦新征程 礼赞劳动美</h4>
              <p>新时代思想教育专题课程，弘扬劳动精神，筑梦新征程</p>
              <div class="ideology-news-meta">
                <span>思政教育中心</span>
                <div class="ideology-viewers">
                  <span>👁️</span>
                  <span>5689人学习</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 近期直播 - 纵向列表 -->
        <div class="section-header">
          <h2 class="section-title">近期直播</h2>
          <a href="#" class="more-link" data-target="live-center">更多</a>
        </div>
        <div class="live-news">
          <div class="live-news-item">
            <div class="live-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
              <div class="live-badge">直播中</div>
            </div>
            <div class="live-news-item-content">
              <h4>名师公开课：数学思维训练</h4>
              <p>资深教师讲解数学解题技巧</p>
              <div class="live-news-meta">
                <span>张老师</span>
                <div class="live-viewers">
                  <span>👁️</span>
                  <span>1.2万观看</span>
                </div>
              </div>
            </div>
          </div>
          <div class="live-news-item">
            <div class="live-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
              <div class="live-badge">即将开始</div>
            </div>
            <div class="live-news-item-content">
              <h4>校园开放日：广州市实验小学</h4>
              <p>全方位展示校园环境与教学特色</p>
              <div class="live-news-meta">
                <span>14:30开始</span>
                <div class="live-viewers">
                  <span>👁️</span>
                  <span>预约观看</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 近期活动 - 改为与近期直播相同的纵向列表 -->
        <div class="section-header">
          <h2 class="section-title">近期活动</h2>
          <a href="#" class="more-link" data-target="activity-center">更多</a>
        </div>
        <div class="events-news">
          <div class="events-news-item">
            <div class="events-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
              <div class="events-badge">线上活动</div>
            </div>
            <div class="events-news-item-content">
              <h4>粤语诗词大会</h4>
              <p>弘扬传统文化，打造独具地方文化特色的品牌互动项目</p>
              <div class="events-news-meta">
                <span>10月15日</span>
                <span>1289人报名</span>
              </div>
            </div>
          </div>
          <div class="events-news-item">
            <div class="events-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
              <div class="events-badge">线下活动</div>
            </div>
            <div class="events-news-item-content">
              <h4>广府文化研学</h4>
              <p>涵盖人文、科学、自然等主题的研学旅行</p>
              <div class="events-news-meta">
                <span>11月5日</span>
                <span>剩余24名额</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 教育内容 - 原教育资讯，位置调整到近期活动下面 -->
        <div class="section-header">
          <h2 class="section-title">教育内容</h2>
          <a href="#" class="more-link" data-target="education-main">更多</a>
        </div>
        <div class="news">
          <div class="news-item">
            <div class="news-item-image"></div>
            <div class="news-item-content">
              <h4>新学期启动计划：家长第一课</h4>
              <p>邀请名校校长直播分享新学期规划</p>
            </div>
          </div>
          <div class="news-item">
            <div class="news-item-image"></div>
            <div class="news-item-content">
              <h4>广州教育政策新变化</h4>
              <p>了解最新的招生政策和教育改革方向</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 思政内容列表子页面 -->
<div class="tab-content" id="ideology-more">
  <div class="container">
    <a href="#" class="back-button" data-back="education">← 返回</a>
    <h2 class="subpage-title">思政专题</h2>

    <div class="ideology-news">
      <div class="ideology-news-item">
        <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
          <div class="ideology-badge">思政专题</div>
        </div>
        <div class="ideology-news-item-content">
          <h4>《一门"新"思》新时代 我来讲--筑梦新征程 礼赞劳动美</h4>
          <p>新时代思想教育专题课程，弘扬劳动精神，筑梦新征程</p>
          <div class="ideology-news-meta">
            <span>思政教育中心</span>
            <div class="ideology-viewers">
              <span>👁️</span>
              <span>5689人学习</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="ideology-news-item">
        <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
          <div class="ideology-badge">思政专题</div>
        </div>
        <div class="ideology-news-item-content">
          <h4>红色文化传承教育系列活动</h4>
          <p>弘扬革命精神，传承红色基因，培养爱国主义情怀</p>
          <div class="ideology-news-meta">
            <span>思政教育中心</span>
            <div class="ideology-viewers">
              <span>👁️</span>
              <span>4231人学习</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="ideology-news-item">
        <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
          <div class="ideology-badge">思政专题</div>
        </div>
        <div class="ideology-news-item-content">
          <h4>社会主义核心价值观主题讲座</h4>
          <p>深入解读社会主义核心价值观的内涵与实践</p>
          <div class="ideology-news-meta">
            <span>思政教育中心</span>
            <div class="ideology-viewers">
              <span>👁️</span>
              <span>3897人学习</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="ideology-news-item">
        <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
          <div class="ideology-badge">思政专题</div>
        </div>
        <div class="ideology-news-item-content">
          <h4>青少年法治教育专题课程</h4>
          <p>增强青少年法治意识，培养遵纪守法好公民</p>
          <div class="ideology-news-meta">
            <span>思政教育中心</span>
            <div class="ideology-viewers">
              <span>👁️</span>
              <span>3124人学习</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="ideology-news-item">
        <div class="ideology-news-item-image" style="background-image: url('https://via.placeholder.com/600x400')">
          <div class="ideology-badge">思政专题</div>
        </div>
        <div class="ideology-news-item-content">
          <h4>中华优秀传统文化教育</h4>
          <p>传承中华文化精髓，增强文化自信</p>
          <div class="ideology-news-meta">
            <span>思政教育中心</span>
            <div class="ideology-viewers">
              <span>👁️</span>
              <span>2765人学习</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    <!-- 教育主场子页面 -->
    <div class="tab-content" id="education-main">
      <div class="container">
        <a href="#" class="back-button" data-back="education">← 返回</a>
        <h2 class="subpage-title">教育内容</h2>

        <div class="categories">
          <div class="category">
            <div class="category-icon">🎓</div>
            <h3>广州共享课堂</h3>
            <!-- <p>三分钟一个知识点</p> -->
          </div>
          <div class="category">
            <div class="category-icon">📰</div>
            <h3>湾区教育快讯</h3>
            <!-- <p>本地教育政策资讯</p> -->
          </div>
          <div class="category">
            <div class="category-icon">🎙️</div>
            <h3>《谈校有鸿儒》</h3>
            <!-- <p>科技赋能新纪元</p> -->
          </div>
          <div class="category">
            <div class="category-icon">🏠</div>
            <h3>家庭教育</h3>
            <!-- <p>科学实用指南</p> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 活动中心子页面 - 合并了互动成长营和知行探索营 -->
    <div class="tab-content" id="activity-center">
      <div class="container">
        <a href="#" class="back-button" data-back="education">← 返回</a>
        <h2 class="subpage-title">活动中心</h2>
        
        <!-- 活动中心标签页 -->
        <div class="activity-center-tabs">
          <div class="activity-tab active" data-tab="interaction">互动成长营</div>
          <div class="activity-tab" data-tab="action">知行探索营</div>
        </div>
        
        <!-- 互动成长营内容 -->
        <div class="function-grid" id="interaction-content">
          <div class="function-item">
            <div class="function-icon">❓</div>
            <h3>招生答疑</h3>
            <p>解答各类招生政策问题</p>
          </div>
          <div class="function-item">
            <div class="function-icon">🎁</div>
            <h3>有奖问答</h3>
            <p>参与问答赢取精美奖品</p>
          </div>
          <div class="function-item">
            <div class="function-icon">💭</div>
            <h3>互动问答</h3>
            <p>与教育专家在线交流</p>
          </div>
          <div class="function-item">
            <div class="function-icon">📜</div>
            <h3>粤语诗词大会</h3>
            <p>弘扬传统文化，感受诗词魅力</p>
          </div>
          <div class="function-item">
            <div class="function-icon">🏛️</div>
            <h3>广府文化小课堂</h3>
            <p>了解广府文化历史与特色</p>
          </div>
          <div class="function-item">
            <div class="function-icon">✍️</div>
            <h3>作文投稿</h3>
            <p>展示学生优秀作品</p>
          </div>
          <div class="function-item">
            <div class="function-icon">📊</div>
            <h3>教育热点投票</h3>
            <p>参与教育话题讨论</p>
          </div>
        </div>
        
        <!-- 知行探索营内容 -->
        <div class="function-grid" id="action-content" style="display: none;">
          <div class="function-item">
            <div class="function-icon">🧭</div>
            <h3>研学活动报名</h3>
            <p>参与各类主题研学活动</p>
          </div>
          <div class="function-item">
            <div class="function-icon">📰</div>
            <h3>小记者报名</h3>
            <p>培养新闻采编能力</p>
          </div>
          <div class="function-item">
            <div class="function-icon">👨‍👩‍👧‍👦</div>
            <h3>家庭教育实践</h3>
            <p>亲子互动与家庭教育指导</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 教育直播中心子页面 -->
    <div class="tab-content" id="live-center">
      <div class="container">
        <a href="#" class="back-button" data-back="education">← 返回</a>
        <h2 class="subpage-title">教育直播中心</h2>

        <div class="function-grid">
          <div class="function-item">
            <div class="function-icon">🏫</div>
            <h3>校园云直播</h3>
            <p>校园活动、开放日实时直播</p>
          </div>
          <div class="function-item">
            <div class="function-icon">🎭</div>
            <h3>活动直播</h3>
            <p>教育讲座、比赛活动直播</p>
          </div>
        </div>

        <!-- <div class="section-header">
          <h2 class="section-title">热门直播</h2>
          <a href="#" class="more-link">更多</a>
        </div>
        <div class="live-list">
          <div class="live-card">
            <div class="live-badge-old">直播中</div>
            <div
              class="live-image"
              style="background-image: url('https://via.placeholder.com/600x400')"
            >
              <div class="live-play-btn">▶</div>
            </div>
            <div class="live-content">
              <h3>名师公开课：数学思维训练</h3>
              <p>资深教师讲解数学解题技巧</p>
              <div class="live-meta">
                <span>张老师</span>
                <div class="live-viewers-old">
                  <span>👁️</span>
                  <span>1.2万观看</span>
                </div>
              </div>
            </div>
          </div>
          <div class="live-card">
            <div class="live-badge-old">即将开始</div>
            <div
              class="live-image"
              style="background-image: url('https://via.placeholder.com/600x400')"
            >
              <div class="live-play-btn">▶</div>
            </div>
            <div class="live-content">
              <h3>校园开放日：广州市实验小学</h3>
              <p>全方位展示校园环境与教学特色</p>
              <div class="live-meta">
                <span>14:30开始</span>
                <div class="live-viewers-old">
                  <span>👁️</span>
                  <span>预约观看</span>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <div class="tab-content" id="interaction">
      <div class="container">
        <h2 class="section-title">互动社区</h2>
        <div class="interaction-list">
          <div class="interaction-card">
            <div class="interaction-header">
              <div class="interaction-title">招生政策解读</div>
              <div class="interaction-date">10-12</div>
            </div>
            <div class="interaction-content">最新招生政策变化解读，家长必看！</div>
            <div class="interaction-stats">
              <span>🔍 1258浏览</span>
              <span>💬 86评论</span>
            </div>
          </div>
          <div class="interaction-card">
            <div class="interaction-header">
              <div class="interaction-title">有奖问答：广府文化</div>
              <div class="interaction-date">10-10</div>
            </div>
            <div class="interaction-content">参与广府文化知识问答，赢取精美礼品！</div>
            <div class="interaction-stats">
              <span>🔍 892浏览</span>
              <span>💬 42评论</span>
            </div>
          </div>
          <div class="interaction-card">
            <div class="interaction-header">
              <div class="interaction-title">作文投稿展示</div>
              <div class="interaction-date">10-08</div>
            </div>
            <div class="interaction-content">优秀学生作文展示，欢迎投稿参与！</div>
            <div class="interaction-stats">
              <span>🔍 1563浏览</span>
              <span>💬 124评论</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" id="yuek">
      <div class="container">
        <h2 class="section-title">粤K专区</h2>
        <div class="course-list">
          <div class="course-card">
            <div class="course-image"></div>
            <div class="course-info">
              <h4>粤语诗词鉴赏</h4>
              <p>学习粤语诗词，感受传统文化魅力</p>
              <div class="course-meta">
                <span>16课时</span>
                <span>1568人学习</span>
              </div>
            </div>
          </div>
          <div class="course-card">
            <div class="course-image"></div>
            <div class="course-info">
              <h4>广府文化入门</h4>
              <p>了解广府文化的历史与特色</p>
              <div class="course-meta">
                <span>12课时</span>
                <span>892人学习</span>
              </div>
            </div>
          </div>
          <div class="course-card">
            <div class="course-image"></div>
            <div class="course-info">
              <h4>粤语日常会话</h4>
              <p>掌握粤语日常交流技巧</p>
              <div class="course-meta">
                <span>20课时</span>
                <span>2314人学习</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" id="service">
      <div class="container">
        <h2 class="section-title">服务</h2>
        <div class="user-menu">
          <a href="#" class="menu-item"> <i>📚</i> 学习中心 </a>
          <a href="#" class="menu-item"> <i>🎫</i> 活动报名 </a>
          <a href="#" class="menu-item"> <i>💎</i> 积分商城 </a>
          <a href="#" class="menu-item"> <i>🔍</i> 政策查询 </a>
          <a href="#" class="menu-item"> <i>📞</i> 客服中心 </a>
          <a href="#" class="menu-item"> <i>⚙️</i> 设置 </a>
        </div>
      </div>
    </div>

    <div class="tab-content" id="profile">
      <div class="container">
        <div class="user-info">
          <div class="user-avatar">张</div>
          <div class="user-details">
            <h3>张先生</h3>
            <p>小学三年级家长</p>
          </div>
        </div>

        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-value">156</div>
            <div class="stat-label">学习积分</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">12</div>
            <div class="stat-label">参与活动</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">8</div>
            <div class="stat-label">发表内容</div>
          </div>
        </div>

        <div class="user-menu">
          <a href="#" class="menu-item"> <i>📚</i> 我的课程 </a>
          <a href="#" class="menu-item"> <i>🎫</i> 我的活动 </a>
          <a href="#" class="menu-item"> <i>💎</i> 积分商城 </a>
          <a href="#" class="menu-item"> <i>⚙️</i> 设置 </a>
        </div>
      </div>
    </div>

    <div class="bottom-nav">
      <a href="#education" class="nav-item active" data-tab="education">
        <div class="nav-icon">🏠</div>
        <div>首页</div>
      </a>
      <a href="#interaction" class="nav-item" data-tab="interaction">
        <div class="nav-icon">💬</div>
        <div>互动</div>
      </a>
      <a href="#yuek" class="nav-item" data-tab="yuek">
        <div class="nav-icon">🔤</div>
        <div>粤K</div>
      </a>
      <a href="#service" class="nav-item" data-tab="service">
        <div class="nav-icon">🛠️</div>
        <div>服务</div>
      </a>
      <a href="#profile" class="nav-item" data-tab="profile">
        <div class="nav-icon">👤</div>
        <div>我的</div>
      </a>
    </div>

    <script>
      // 底部导航切换
      document.querySelectorAll('.nav-item').forEach((item) => {
        item.addEventListener('click', function (e) {
          e.preventDefault()

          // 移除所有active类
          document.querySelectorAll('.nav-item').forEach((nav) => {
            nav.classList.remove('active')
          })
          document.querySelectorAll('.tab-content').forEach((tab) => {
            tab.classList.remove('active')
          })

          // 添加active类到当前项
          this.classList.add('active')
          const tabId = this.getAttribute('data-tab')
          document.getElementById(tabId).classList.add('active')
        })
      })

      // 顶部快速导航切换
      document.querySelectorAll('.nav-button').forEach((button) => {
        button.addEventListener('click', function (e) {
          e.preventDefault()

          // 移除所有active类
          document.querySelectorAll('.nav-button').forEach((btn) => {
            btn.classList.remove('active')
          })

          // 添加active类到当前项
          this.classList.add('active')
        })
      })

      // 核心功能栏目点击事件
      document.querySelectorAll('.feature-card').forEach((card) => {
        card.addEventListener('click', function () {
          const targetId = this.getAttribute('data-target')

          // 隐藏所有页面
          document.querySelectorAll('.tab-content').forEach((tab) => {
            tab.classList.remove('active')
          })

          // 显示目标页面
          document.getElementById(targetId).classList.add('active')
        })
      })

      // 返回按钮点击事件
      document.querySelectorAll('.back-button').forEach((button) => {
        button.addEventListener('click', function (e) {
          e.preventDefault()
          const targetId = this.getAttribute('data-back')

          // 隐藏所有页面
          document.querySelectorAll('.tab-content').forEach((tab) => {
            tab.classList.remove('active')
          })

          // 显示目标页面
          document.getElementById(targetId).classList.add('active')

          // 更新底部导航状态
          document.querySelectorAll('.nav-item').forEach((nav) => {
            nav.classList.remove('active')
            if (nav.getAttribute('data-tab') === targetId) {
              nav.classList.add('active')
            }
          })
        })
      })

      // 更多按钮点击事件 - 修改后的逻辑
      document.querySelectorAll('.more-link').forEach((link) => {
        link.addEventListener('click', function (e) {
          e.preventDefault()
          const targetId = this.getAttribute('data-target')
          
          if (targetId) {
            // 隐藏所有页面
            document.querySelectorAll('.tab-content').forEach((tab) => {
              tab.classList.remove('active')
            })
            
            // 显示目标页面
            document.getElementById(targetId).classList.add('active')
          } else {
            alert('更多功能正在开发中，敬请期待！')
          }
        })
      })

      // Banner轮播
      let currentBanner = 0
      const banners = document.querySelectorAll('.banner-slide')

      function showBanner(index) {
        banners.forEach((banner, i) => {
          banner.classList.toggle('active', i === index)
        })
      }

      function nextBanner() {
        currentBanner = (currentBanner + 1) % banners.length
        showBanner(currentBanner)
      }

      // 初始化显示第一张
      showBanner(currentBanner)
      // 设置轮播间隔
      setInterval(nextBanner, 4000)

      // 添加点击效果
      document
        .querySelectorAll('.btn, .category, .feature-card, .function-item')
        .forEach((element) => {
          element.addEventListener('click', function () {
            this.style.transform = 'scale(0.98)'
            setTimeout(() => {
              this.style.transform = ''
            }, 150)
          })
        })
        
      // 活动中心标签页切换
      document.querySelectorAll('.activity-tab').forEach((tab) => {
        tab.addEventListener('click', function() {
          // 移除所有active类
          document.querySelectorAll('.activity-tab').forEach((t) => {
            t.classList.remove('active')
          })
          
          // 添加active类到当前项
          this.classList.add('active')
          
          // 获取目标内容ID
          const tabType = this.getAttribute('data-tab')
          
          // 隐藏所有内容
          document.getElementById('interaction-content').style.display = 'none'
          document.getElementById('action-content').style.display = 'none'
          
          // 显示目标内容
          document.getElementById(`${tabType}-content`).style.display = 'grid'
        })
      })
    </script>
  </body>
</html>